<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>Mootools UI - choosebox demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../mootools-1.2-core-nc.js"></script>
    <script type="text/javascript" src="../mui.text.js"></script>
    <script type="text/javascript" src="../mui.choosebox.js"></script>
    <script type="text/javascript"><!-- <![CDATA[
    
	var box = new MUI.ChooseBox("countries", {many:true});
	box.list = [
	    new MUI.Label().setText("israel"),
	    new MUI.Label().setText("usa"),
	    new MUI.Label().setText("uk")
	];
	box.addEvent("choose", function(item){
            console.log("chosen");
	    this.list[item].getParent().addClass("active");
	});
	box.addEvent("leave", function(item){
	    this.list[item].getParent().removeClass("active");
	});
	
	window.addEvent("domready", function(){
	    box.render().injectInside(document.body);
	});
    
    // ]]> --></script>
    <style type="text/css">/* <![CDATA[ */
	
	body{background-color:white;}
    
	body *{
	    padding:0;
	    margin:0;
	}
    
	.mui-choosebox{
	    width:200px;
	    background-color:#FFF;
	    text-align:center;
	    padding:1px;
	}
	
	.mui-choosebox div.mui-choosebox-title{
	    width:100%;
	    height:1.2em;
	    background-color:white;
	}
	
	.mui-choosebox ul{
	    list-style:none;
   	    border:1px solid #CCC;
	    /*overflow:scroll;*/
	    height:4em;
	}
	
	.mui-choosebox ul li{
	    cursor:default;
	    width:100%;
	}
	
	.mui-choosebox li.active{
	    background-color:#0000BB;
	    color:white;
	}
    
    /* ]]> */</style>
</head>
<body>
    <select multiple="multiple">
	<option value="1">Israel</option>
	<option value="2">UK</option>
	<option value="2">UK</option>
	<option value="2">UK</option>
	<option value="2">UK</option>
	<option value="2">UK</option>
	<option value="3">USA</option>	
    </select>
</body>
</html>
